<template>
  <el-dialog :visible.sync="show" title="充值窗口" class="ke__dialog-recharge" :close-on-click-modal="false">
    <k-form label-width="100px" @submit="onSubmit" :data="form" v-loading="subing">
      <k-form-item label="用户">
        {{ data.nickname }} <span class="info-uid">{{ data.id }}</span>
      </k-form-item>

      <k-form-item label="积分">
        {{ data.score }}
      </k-form-item>

      <k-form-item label="余额">
        {{ data.money }}
      </k-form-item>

      <el-form-item label="充值">
        <el-radio-group v-model="form.type">
          <el-radio label="score">积分</el-radio>

          <el-radio label="money">余额</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="数额">
        <el-input v-model="form.number"></el-input>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea"></el-input>
      </el-form-item>

      <el-form-item style="text-align: right">
        <el-button type="success" native-type="submit">确认充值</el-button>

        <el-button @click="show = false">取消</el-button>
      </el-form-item>
    </k-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'KDialogRecharge',
  props: {
    value: {}
  },
  data () {
    return {
      form: {
        type: 'score',
        number: ''
      },
      subing: false
    }
  },
  watch:{
    show (v) {
      if (!v) {
        this.form = {
          type: 'score',
          number: ''
        }
      }
    }
  },
  computed: {
    show: {
      get () {
        return !!this.value
      },
      set () {
        this.$emit('input', false)
      }
    },
    data () {
      if (this.show) {
        return JSON.parse(JSON.stringify(this.value))
      } else {
        return {}
      }
    }
  },
  methods: {
    onSubmit () {
      this.subing = true
      this.$emit('submit', this.form, () => {
        this.show = false
        this.subing = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .ke__dialog-recharge {
    /deep/ {
      .el-dialog__body {
        padding: 30px 80px;
      }
    }
  }
  .el-form-item {
    padding: 5px 0;
    margin-bottom: 0;
    /deep/ &__label {
      color: #999;
    }
  }
  .el-form-item + .el-form-item {
    border-top: solid 1px #eee;
  }
  .info-uid {
    background: #399EE4;
    color: #fff;
    padding: 4px 6px;
    font-size: 12px;
    margin-left: 10px;
  }
</style>
